<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ref用于在vue中获取dom元素</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="box">
        <!-- 
            在vue中获取Dom元素的方法：
                1、通过原生js获取元素的六种方法；
                2、用过jQuery获取元素的方法；
                3、通过vue获取元素；
            ref的使用：在标签上标记ref 
            ref为某个标签注册一个唯一的标识，vue对象通过$refs属性访问这个元素对象
        -->
        <h1 ref="test1">{{msg}}</h1>
        <h2 ref="test2">世界你好！</h2>
        <button class="btn" @click="test">获取h1
            元素
        </button>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                msg:'穿秋裤了嘛！'
            },
            methods:{
                test(){
                    console.log(this.$refs);
                    console.log(this.$refs.test1);
                }
            }
        })
    </script>
</body>
</html>